<template id="head">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Webduino Blockly - 控制兩顆 LED 燈</title>
  <!-- webduino -->
  <script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
  <script src="https://blockly.webduino.io/webduino-blockly.js"></script>
  <script src="https://blockly.webduino.io/lib/runtime.min.js"></script>
</template>
<template id="body">
  <div id="light1" class="off">
    <img src='http://i.imgur.com/T5H4MHE.png'></img>
    <img src='http://i.imgur.com/8qFj2Ou.png'></img>
  </div>
  <div id="light2" class="off">
    <img src='http://i.imgur.com/T5H4MHE.png'></img>
    <img src='http://i.imgur.com/8qFj2Ou.png'></img>
  </div>
</template>
<template id="css">
#light1,
#light2 {
  width: 40%;
  display: inline-block;
  margin: 0 5px;
}

#light1 img,
#light2 img {
  width: 100%;
  display: none;
}

#light1.off img:first-child,
#light2.off img:first-child {
  display: inline-block;
}

#light1.on img:last-child,
#light2.on img:last-child {
  display: inline-block;
}
</template>
